<template>
    <vue-simplebar>
        <div class="max-w-screen-lg mx-auto">
            <div class="page-container" v-if="isRouterAlive">
                <el-tabs v-model="activeName" class="-mt-3">
                    <el-tab-pane v-for="(item, index) in $t('game.setting.config.classifyList')"
                                 :key="index" :label="item.label" :name="item.value"></el-tab-pane>
                </el-tabs>
                <!--系统配置-->
                <config-system :active-name="activeName" v-show="activeName == 'system'"></config-system>
                <!--平台配置-->
                <config-platform :active-name="activeName" v-show="activeName == 'platform'"></config-platform>
            </div>
        </div>
    </vue-simplebar>
</template>

<script>
import ConfigSystem from './System.vue'
import ConfigPlatform from './Platform.vue'

export default {
    components: {
        ConfigSystem,
        ConfigPlatform,
    },
    data() {
        return {
            isRouterAlive: false,
            activeName: 'system',
        }
    },
    watch: {
        $route: {
            immediate: true,
            handler(to, from) {
                // 初始化面包屑
                this.$store.commit('admin/breadcrumb/init', {
                    route: [{
                        name: 'game.setting.config.index',
                        meta: {title: 'menu.game.setting.config.index'}
                    }],
                    title: `menu.game.setting.config.${this.$route.params.game}`,
                });
                // 重载页面
                this.isRouterAlive = false;
                this.$nextTick(function () {
                    this.isRouterAlive = true;
                });
            }
        }
    }
}
</script>

<style lang="scss">

</style>
